<template>
  <div>
    <div class="mtb20">

      <el-form inline size="medium" class="mtb20" :model="moduleData">
        <el-form-item label="大标题：">
          <el-input v-model="variables.title" placeholder="美妆护肤"></el-input>
        </el-form-item>
        <el-form-item label="小标题：">
          <el-input v-model="variables.subTitle" placeholder="Makeups&Skin care"></el-input>
        </el-form-item>

        <div class="mtb20">
          <el-button type="success" @click="addSecondCategory">添加二级分类</el-button>
          <pcTableAdd :tableData="variables.secondTitleTableData"></pcTableAdd>
        </div>

        <div class="mtb20">
          <pcSinglImageUploadTemplate
            :moduleId="moduleData.moduleId"
            :fileList="variables.bigImgList"
            :MoreMapDialogVisible="MoreMapDialogVisible"
            :moreImagesLabel="bigImgLabel"
          ></pcSinglImageUploadTemplate>
        </div>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close()" size="mini">取消</el-button>
      <el-button type="primary" @click="saveModuleData" size="mini">确定</el-button>
    </div>

  </div>
</template>
<script>
  import pcTableAdd from ".././component/pcTableAdd"; //添加二级分类
  import pcSinglImageUploadTemplate from ".././component/pcSinglImageUploadTemplate";
  export default {
    name:'pcMainThemeBigImg',
    props: {
      //模块Id
      moduleId: {
        type: String
      },

      //模块页面的所有数据
      moduleData: {
        type: Object,
        default: () => {
          return {
          };
        }
      },

      //上传文件的列表
      fileList: {
        type: Array,
        default: () => {
          return [];
        }
      },

    },


    components: {
      pcTableAdd,
      pcSinglImageUploadTemplate
    },



    data() {
      return {
        MoreMapDialogVisible: false, //多图弹框是否展示
        bigImgLabel: {
          name: "上传整行大图",
          btnFlag: true
        },
        variables :{
          title: null,
          subTitle: null,
          secondTitleTableData: [],
          bigImgList: [],
        },


      };
    },

    mounted(){
      //对象当中包含对象,需要JSON解析一下;
      if (this !== null && this.moduleData !== null
        && this.moduleData.variables !== null
        && this.moduleData.variables !== ''
        && this.moduleData.variables !== ""
      ) {
        this.variables = this.moduleData.variables;
      }
    },


    methods: {
      //上传二级目录
      addSecondCategory(){
        this.variables.secondTitleTableData.push({
          name: "",
          imgLink: ""
        });
      },

      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      /**
       * 保存模块数据
       */
      saveModuleData(){
        let this_ = this;
        let params = {};
        params.templateDataType = 0;
        params.moduleId = this_.moduleData.cmsModuleId;
        params.platform = 2;

        //图片url转换
        let bigImgList = this_.variables.bigImgList;
        if (bigImgList!=null && bigImgList.length>0){
          bigImgList.forEach(item => {
            item.imgUrl = item.url;
          });
        }else{
          bigImgList = [];
        }


        params.variablesObject = {
          title: this_.variables.title,
          subTitle: this_.variables.subTitle,
          secondTitleTableData: this_.variables.secondTitleTableData,
          bigImgList:bigImgList,
        };
        this_.utils.request.cmsPageModuleAddModuleData(params, res => {
          if (res.code === "0000") {
            this_.$emit('getIndex');
            this_.$message({"message": "保存成功", type: "success"});
          } else {
              this_.variables={};
            this_.$message({"message": res.msg, type: "error"});
          }
        })
      },

      /**
       * 返回上一页
       */
      close(){
        this.$router.push("/Pages/Configuration/IndexShow");
      },


    }
  };
</script>
<style lang="scss" scoped>
  .mtb20 {
    margin: 20px 0;
    text-align: left;
  }

  .el-button {
    margin-bottom: 5px;
    text-align: left;
  }

  .productProduct {
    text-align: left;
  }
</style>
